<template>
	<view class="wrap">
		<form  @submit="submit" >
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" 
						placeholder-class="line" 
						placeholder="请填写会员昵称" 
						name="nickname"
						v-model="nickname"
					 />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload 
						ref="uUpload"
						name="avatarurl"
						:fileList="oldAvatarUrl"
						max-count="1"
						:action="action"
						upload-text="上传头像"
						:auto-upload="false" 
						@on-success="uploadsuccess"
						@on-error="uploaderror"
						@on-choose-complete="chooseimg"
						:form-data="formData"
						:header="header"
					></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio 
								v-for="(item, index) in sexlist" :key="index" 
								:name="item.value"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" 
						placeholder-class="line" 
						placeholder="2021-01-24" 
						name="birthday" 
						v-model="birthday"
					/>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input
						disabled
						type="text"
					  	placeholder-class="line" 
					  	placeholder="省市区县、乡镇等" 
					  	name="region" 
					  	v-model="region"
					  />
				</view>
			</view>
			<regionPicker
				:visible.sync="regionVisible"
				mode="region"
				default-type="value"
				:hide-area="false"
				@confirm="onConfirm($event,'region')"
				ref="region" 
			></regionPicker>
			<u-picker 
				mode="time" 
				ref="uPicker" 
				v-model="birthdayShow" 
				@confirm="birthdayConfirm"
			/>
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset" >重置</button>
		</form>
	</view>	
</template>

<script>
	
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components:{regionPicker},
		data() {
			return {
				id:'',//初始化修改数据id
				// 头像提交服务端地址
				action:this.$URL+`/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl:[],
				// 表单数据(不含头像信息)
				formData:{},
				// 初始化header头
				header:{},
				oldImg:'',//初始化旧图片路径
				regionVisible:false,//初始化地区选择器开关
				nickname:'',//初始化收件人姓名
				region:'',//初始化地区默认值
				birthday:'',
				birthdayShow:false,
				sexlist:[
						{value:1,name:'男'},
						{value:2,name:'女'},
					],
				sex:'',//初始化会员性别
				userInfo:{},//会员信息
			}
		},
		
		onLoad(){
			// 1.检测是否登录
			let userInfo = this.$tool.islogin();
			if(userInfo != false){
				this.userInfo = userInfo;
				// 2.获取会员信息
				this.getUserInfo();
			}
		},
			
		methods: {
			// 提交用户信息
			submit(e){
				// 1.获取提交数据(除头像之外)
				let editData = e.detail.value;
				editData.sex = this.sex;
				editData.id = this.id;
				
				// 2.验证提交数据格式
				
				// 3.执行提交（检测用户是否修改头像）
				if(this.$refs.uUpload.lists[0].file){
					console.log('走组件上传')
					// 3.1用户修改了头像走组件的手动上传即可
					// 通过上传组件实现修改操作
					// 注意事项：
						// 等到下一次(新的)dom重新渲染完毕后执行方法内的逻辑
						// 使用组件上传（wx.uploadFile）图片的话一定要有图片资源不能为空
						this.formData = editData;//将除头像之外的表单字段赋值给form-data携带到服务端
						this.header = {"authorization":this.userInfo.token}//在header头中携带token、
						this.$nextTick(()=>{
							this.$refs.uUpload.upload();//手动开始上传请求
						})
				}else{
					// 追加旧的头像地址
					editData.avatarurl = this.oldImg;
					this.$http({
						url:"infoedit",
						method:"post",
						data:editData
					})
					.then(res=>{
						console.log(res)
					})
					.catch(err=>console.log(err))
					// 同步本地缓存中的用户信息
				}
				
				
				
			},
			// 获取会员的信息
			getUserInfo(){
				this.$http({
					url:"getuserinfo",
					data:{uid:this.userInfo.uid}
				})
				.then(res=>{
					//1.获取旧数据展示到修改表单
					let userInfo = res.list[0];
					this.nickname = userInfo.nickname;
					this.oldAvatarUrl = [{url:this.$URL+userInfo.avatarurl}];
					this.sex = userInfo.sex;
					this.birthday = userInfo.birthday;
					this.region = userInfo.region;
					// 2.赋值修改信息需要的条件
					this.id = userInfo.id
					this.oldImg = userInfo.avatarurl
					
				})
				.catch(err=>console.log(err))
			},
			// 选择会员地区
			onConfirm(res){
				this.region = res.result;
			},
			// 监听本地选择图片
			chooseimg(lists, name){
			},
			// 性别标签切换
			radioGroupChange(e){
			},
		
			// 地址默认设置开关
			setDefault(e){
			},
		
			// 展示生日选择器
			showBirthdayPicker(){
				this.birthdayShow = true;
			},
			// 监听生日选择器
			birthdayConfirm(info){
				// 组装会员的生日
				this.birthday = info.year+'-'+info.month+'-'+info.day
			},
			
			// 图片上传成功触发
			uploadsuccess(data, index, lists, name){
				console.log('上传成功',data)
				this.$refs.uUpload.lists[0].file=false
				// 同步本地缓存中的用户信息
			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name){
				console.log('上传失败',res)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>
